/* 
* @Author: zhongjiaxin
* @Date:   2018-03-20 17:34:13
* @Last Modified by:   anchen
* @Last Modified time: 2018-03-22 10:25:56
*/
;(function(factory){
    if(typeof define === 'function' && define.amd){
        define(['jquery','lodash'],factory);
    }else if (typeof exports !== 'undefined') {
        // For Node.js or CommonJS.
        var _ = require('lodash');
        var $ = require('jquery');
        module.exports = factory($, _);   
    }else{
         factory(jQuery,_);
    }   
}(function($,_){
    //防冲突处理，如果原型链上有，将之移给old变量
    var old = $.fn.rightContentFrame;
    //构造函数
    var RightContentFrame=function RightContentFrame(element,options){
      var self=this;
        this.$element = $(element);
        this.options = $.extend({},$.fn.rightContentFrame.defaults,options);
        this.init();
        
        
    };

    // 定义原型
    RightContentFrame.prototype ={
        // 初始化
        init:function(){
            this.buildRightSidebarHtml();
        },

        //建立最右侧的tab页Html
        buildRightSidebarHtml:function(){
            var self=this;
            var node=self.options.rightContentData;
            var html='';
            html+='<div class="container_title" id="rightStyleTitle">'
                    +'<ul>'
                    +'</ul>'
                +'</div>'
                +'<div class="container_content rightSideContent" id="rightSideContent">'
                +'</div>';
            self.$element.html(html);

            self.tabTitle=self.$element.find("#rightStyleTitle>ul");
            self.tabContent=self.$element.find("#rightSideContent");

            self.rightSideTypeObject();
            self.initRightSideTypeDom(node);

        },

        //首先做好tab标签所有的名字
        rightSideTypeObject:function(){
            var self=this;
            self.tabArr=new Array();
            self.tabTypeObj=[
                {id:1,tabVal:"fields",label:"组件属性"},
                {id:2,tabVal:"styles",label:"组件样式"},
                {id:3,tabVal:"animateValue",label:"组件动画"}
            ];
            $.each(self.tabTypeObj,function(idx,item){
                self.tabArr.push(item.tabVal);
            });
        },

        //初始化对应的组件的tab页Dom
        initRightSideTypeDom:function(node){
            var self=this;
            var tabData=new Array();
            var tabTitleLi='';
            var tabContentDiv='';
            tabData=self.returnTabData(node,tabData);
            $.each(tabData,function(idx,item){

                tabTitleLi+='<li tabvalue="'+item.tabVal+'" class="'+(idx==0?'active':'')+'">'+item.label+'</li>';

                tabContentDiv+='<div boxtab="'+item.tabVal+'" class="'+(idx==0?'active':'')+'"><h1>'+item.label+'</h1></div>'
            });
            self.tabTitle.html(tabTitleLi);
            self.tabContent.html(tabContentDiv);

            self.matchTabContent(node);
        },

        //返回匹配对应的组件所在的tab标签数据。
        returnTabData:function(node,tabData){
            var self=this;
            var tabNode=new Array();
            tabNode=self.saveNewTabType(node);
            $.each(self.tabTypeObj,function(idx,item){
                if($.inArray(item.tabVal,tabNode)>-1){
                    tabData.push(item);
                }
            });
            return tabData;
        },

        //保存并返回匹配对应组件的数据中的key。
        saveNewTabType:function(node){
            var self=this;
            var nodeTabArr=new Array();
            var newTabArr=new Array();
            for(var key in node){
                nodeTabArr.push(key);
            }
            $.each(nodeTabArr,function(i,item){
                if(self.tabArr.indexOf(item)>-1){
                    newTabArr.push(item);
                }
            });
            return newTabArr;
        },

        //匹配tab内容页的属性值
        matchTabContent:function(node){
            var self=this;
            var tabContentDiv=self.$element.find("#rightSideContent>div");
            tabContentDiv.each(function(i){
                var boxTab=tabContentDiv.eq(i).attr("boxtab");
                self[boxTab+'Dom'](tabContentDiv.eq(i),node[boxTab]);
            });
        },
        //初始化组件属性的DOM
        fieldsDom:function(dom,node){
            var self=this;
            var html='';
            html+=self.matchTypeDom(dom,node);
            dom.html(html);
        },
        //初始化组件样式的DOM
        stylesDom:function(dom,node){
            var self=this;
            var html='';
            html+=self.matchTypeDom(dom,node);
            dom.html(html);
        },
        //初始化组件动画的DOM
        animateValueDom:function(dom,node){
        //

        },
        //匹配最右侧的tab页内容的名字并初始化对应组件的属性东西。
        matchTypeDom:function(rightSlide,node){
            var self=this;
            var html='';
            html+='<div class="tab-pane active" id="base-config" tabindex="0" style="height: 100%; overflow: auto; outline: none;">'
                +'<div class="edit">'
                +'<form class="editor-form" role="form">'
                +'<div class="container-fluid">'
                +'<div class="row">';
            for(var n in node){
                if(n === 'datas' || n === 'valids'){
                    html+=self.initDatas(node[n],n);
                }
                else{
                    html+=self.enterMatchDom(node[n]);
                }
            }
            html+='</div>'
                +'</div>'
                +'</form>'
                +'</div>'
                +'</div>';
            rightSlide.html(html);
            return rightSlide.html();
        },
        initDatas:function(node,name){
            var self=this;
        var html='';
        var type=node.type;
        html+=self.enterMatchDatasType(node,type,name,html);
        return html;
        },
        enterMatchDatasType:function(node,type,name,html){
            var self=this;
        html+='<div class="form-group '+node.cls+'">';
        html+='<label class="'+node.labelcls+' control-label">'+node.label+'</label>';
        if(type=='group' || type == 'tree'){
            if(node.value.length>1){
                html+='<div class="'+node.valuecls+' field '+node.type+' maingroup ui-sortable" data-name="'+name+'" name="'+name+'" id="'+name+'" data-type="'+node.type+'">';
                if(type =='group'){
                    $.each(node.value,function(idx,item){
                        html+='<div class="box clearfix show '+(idx==0?'':'toggle')+' ui-sortable-handle">'
                            +'<div class="btn-toolbar">'
                            +'<div role="group" class="btn-group btn-group-xs btn-config">'
                            +'<button rel="copyHandler" class="btn btn-primary handler">'
                            +'<i class="fa fa-plus"></i>'
                            +'</button>'
                            +'<button rel="hideHandler" class="btn btn-primary handler">'
                            +'<i class="fa fa-eye"></i>'
                            +'</button>'
                            +'</div>'
                            +'<div role="group" class="btn-group btn-group-xs btn-base">'
                            +'<button rel="removeHandler" class="btn btn-danger handler">'
                            +'<i class="glyphicon glyphicon-remove"></i>'
                            +'</button>'
                            +'</div>'
                            +'</div>';
                        node.fields.value.value=item.value;
                        html+=self.enterMatchDom(node.fields);
                        html+='</div>';
                    });
                }else if(type == 'tree'){
                    html+='<div class="nestable dd">';
                    html+='<ol class="dd-list">';
                    $.each(node.value,function(idx,item){
                        html+='<li class="dd-item dd3-item" data-value="'+item.value+'" data-page="" data-href="" data-target="_self">';
                        html+='<div class="dd-handle dd3-handle"></div>';
                        html+='<div class="dd3-content">'
                            +'<div class="box">'
                            +'<div class="btn-toolbar">'
                            +'<div role="group" class="btn-group btn-group-xs btn-config">'
                            +'<button rel="copyHandler" class="btn btn-primary handler" data-parent="li.dd-item">'
                            +'<i class="fa fa-plus"></i>'
                            +'</button>'
                            +'<button rel="editHandler" class="btn btn-primary handler" data-parent="li.dd-item" data-edit=".template">'
                            +'<i class="fa fa-edit"></i>'
                            +'</button>'
                            +'</div>'
                            +'<div role="group" class="btn-group btn-group-xs btn-base">'
                            +'<button rel="removeHandler" class="btn btn-danger handler">'
                            +'<i class="glyphicon glyphicon-remove"></i>'
                            +'</button>'
                            +'</div>'
                            +'</div>'
                            +'<div class="view">'+item.value+'</div>'
                            +'</div>'
                            +'</div>';
                        html+='<div class="box clearfix dropdown hidden">';
                        html+=node.fields.value.value=item.value;
                        html+=self.enterMatchDom(node.fields);
                        html+='</div>';
                        html+='</li>';
                    });
                    html+='</ol>';
                    html+='</div>';
                }

                html+='</div>';
                html+='</div>';
            }
            else{
                html+='<div class="'+node.valuecls+' field '+node.type+' maingroup ui-sortable" data-name="'+name+'" name="'+name+'" id="'+name+'" data-type="'+node.type+'">';
                html+='<div class="box clearfix show ui-sortable-handle">';
                html+='<div class="btn-toolbar">'
                    +'<div role="group" class="btn-group btn-group-xs btn-config">'
                    +'<button rel="copyHandler" class="btn btn-primary handler">'
                    +'<i class="fa fa-plus"></i>'
                    +'</button>'
                    +'<button rel="hideHandler" class="btn btn-primary handler">'
                    +'<i class="fa fa-eye"></i>'
                    +'</button>'
                    +'</div>'
                    +'<div role="group" class="btn-group btn-group-xs btn-base">'
                    +'<button rel="removeHandler" class="btn btn-danger handler">'
                    +'<i class="glyphicon glyphicon-remove"></i>'
                    +'</button>'
                    +'</div>'
                    +'</div>';
                html+=self.enterMatchDom(node.fields);
                html+='</div>';
                html+='</div>';
            }
        }
        else if(type == 'option'){
            html+='<div class="form-group '+node.cls+'">';
            html+='<label class="'+node.labelcls+' control-label">'+node.label+'</label>';
            html+='<div class="'+node.valuecls+' field group ui-sortable" data-type="'+type+'" id="'+name+'" data-name="'+name+'">';
            $.each(node.value,function(idx,item){
                html+='<div class="box ui-sortable-handle">';
                html+='<div class="btn-toolbar">'
                    +'<div role="group" class="btn-group btn-group-xs btn-config">'
                    +'<button rel="copyHandler" class="btn btn-primary handler" type="button">'
                    +'<i class="fa fa-plus"></i>'
                    +'</button>'
                    +'</div>'
                    +'<div role="group" class="btn-group btn-group-xs btn-base">'
                    +'<button rel="removeHandler" class="btn btn-danger handler">'
                    +'<i class="glyphicon glyphicon-remove"></i>'
                    +'</button>'
                    +'</div>'
                    +'</div>';
                html+='<div class="form-group">'
                    +'<div class="input-group">'
                    +'<span class="input-group-addon">'
                    +'<input type="'+item.type+'" class="checked" name="checked" value="1">'
                    +'</span>'
                    +'<input type="text" placeholder="请输入选项值" name="value" value="'+item.value+'" class="form-control">'
                    +'</div>'
                    +'</div>';
                html+='</div>';
            });

            html+='</div>';
            html+='</div>';
        }
        html+='</div>';
        return html;
    },
        enterMatchDom:function(node){
            var self=this;
        var html='';
        if(typeof node === 'object' && node.constructor ===Object){
            for(var n in node){
                if(typeof node[n] === 'object' && node[n].constructor === Object){
                    html+=self.enterMatchDom(node[n]);
                }else{
                    var valueHtml='';
                    if(typeof node.value === 'object' &&  node.value.constructor === Array){
                        valueHtml+=self.enterMatchDom(node.value);
                    }else{
                        valueHtml=node.value;
                    }
                    var type=node.type;
                    var typeHtml='';
                    typeHtml+=self.enterMatchFieldsType(node,valueHtml,type,typeHtml);

                    html+='<div class="form-group '+node.cls+'" data-id="value">';
                    html+='<label class="'+node.labelcls+' control-label">'+node.label+'</label>';
                    html+='<div class="'+node.valuecls+'">'
                        +typeHtml
                        +'</div>';
                    html+='</div>';
                    break;
                }
            }
        }else if(typeof node === 'object' && node.constructor ===Array){
            $.each(node,function(idx,item){
                html+='<li data-original-index="0" class="selected">'
                    +'<a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true">'
                    +'<span class="text">'+item.label+'</span>'
                    +'<span class="glyphicon glyphicon-ok check-mark"></span>'
                    +'</a>'
                    +'</li>'
            });
        }
        return html;
        },
        enterMatchFieldsType:function(node,valueHtml,type,typeHtml){
        switch (type){
            case 'input':
                typeHtml='<'+type+' class="form-control field" type="text" value='+valueHtml+'>';
                break;
            case 'radio':
            case 'checkbox':
                typeHtml='<input type="'+type+'">';
                break;
            case 'textarea':
                typeHtml='<'+type+' class="form-control field" data-type="textarea" data-name="editor" name="editor" id="editor">'+valueHtml+'</'+type+'>';
                break;
            case 'data':
                typeHtml='<button type="button" class="btn btn-primary field" role="button" data-type="'+type+'" data-name="'+type+'" name="'+type+'" id="'+type+'">数据来源</button>';
                break;

            case 'sliderdown':
                var suffix=node.suffix;
                typeHtml+='<div class="input-group field" data-type="'+type+'" data-name="height" data-suffix="px" data-step="50" data-min="'+node.min+'" data-max="'+node.max+'" data-value="'+node.value+'">';
                typeHtml+='<input type="text" class="form-control value" data-name="height" name="height" value="">';

                if(suffix.length>0){
                    typeHtml+='<span class="input-group-addon sliderdown">'
                        +'<input type="text" class="form-control suffix" data-name="height" value="'+node.suffix+'">'
                        +'</span>';
                }
                typeHtml+='<div class="input-group-btn">'
                    +'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">'
                    +'<i class="fa fa-chevron-down" aria-hidden="true"></i>'
                    +'</button>'
                    +'<div class="dropdown-menu dropdown-menu-right">'
                    +'<div class="col-xs-12 col-xs-slider"><div class="slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 15%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 15%;"></span></div></div>'
                    +'</div>'
                    +'</div>';
                typeHtml+='</div>';
                break;
            case 'buttongroup':
                typeHtml+='<div class="btn-group btn-group-sm btn-block field" data-multi="1" data-type="buttongroup" data-name="textStyle">';
                $.each(node.value,function(idx,item){
                    typeHtml+='<button type="button" class="btn   btn-default  btn-sm '+item.cls+'" data-key="'+item.key+'" data-value="'+item.value+'">'+item.label+'</button>';
                });
                typeHtml+='</div>';
                break;
            case 'colorpicker':
                typeHtml='<div class="input-group colorpicker-component field colorpicker-element" data-type="colorpicker" data-name="color">'
                    +'<input class="form-control field" type="text" name="color" id="color" value="'+valueHtml+'">'
                    +'<span class="input-group-addon"><i style="background-color: rgb(0, 0, 0);"></i></span>'
                    +'</div>';
                break;
            case 'imgpicker':
                typeHtml='<div class="input-group image-element field" data-type="'+type+'" data-name="image">'
                    +'<input class="form-control" type="text" name="image" id="image" value="'+valueHtml+'" data-value="'+valueHtml+'">'
                    +'<span class="input-group-addon"><img src="'+valueHtml+'"></span>'
                    +'</div>';
                break;
            case 'sliderdown':
                typeHtml='<div class="myInput-group">'
                    +'<input class="value" type="text" value="'+valueHtml+'">'
                    +'<input class="unit" type="text" value="'+node.suffix+'">'
                    +'<button type="button" class="btn btn-default packBtn">'
                    +'<span class="fa fa-chevron-down"></span>'
                    +'</button>'
                    +'</div>';
                break;

            case 'select':
            case 'pageselect':
                typeHtml+='<div class="btn-group bootstrap-select field form-control">';
                typeHtml+='<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="page" title="无" aria-expanded="false"><span class="filter-option pull-left">无</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>';
                typeHtml+='<div class="dropdown-menu open" role="combobox">';
                typeHtml+='<ul class="dropdown-menu inner" role="listbox" aria-expanded="false">';

                typeHtml+=typeHtml;

                typeHtml+='</ul>';
                typeHtml+='</div>';
                typeHtml+='</div>';

                typeHtml='<div class="dropdown">'
                            +'<button class="btn btn-default dropdown-toggle width100" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'
                                +'<span class="value">2</span>'
                                +'<span class="caret"></span>'
                            +'</button>'
                            +'<ul class="dropdown-menu width100" aria-labelledby="dropdownMenu1">'
                                +valueHtml
                            +'</ul>'
                        +'</div>';
                break;
        }
        return typeHtml;
    }
    };


    // 为了避免多次实例化
    $.fn.rightContentFrame = function rightContentFrame(option,value) {
        var retval;
        var $set = this.each(function () {
            var $this = $(this);
            var data = $this.data('makerui.rightContentFrame');
            var options = typeof option === 'object' && option;

            $this.data('makerui.rightContentFrame', (data = new RightContentFrame(this, options)));
            if (typeof option === 'string') retval = data[option](value);
        });
        return (retval === undefined) ? $set : retval;
    };
    
    $.fn.rightContentFrame.defaults = {
      isAnimate:false,
       
    };
    $.fn.rightContentFrame.Constructor = RightContentFrame;
    $.fn.rightContentFrame.noConflict = function () {
        $.fn.rightContentFrame = old;
        return this;
    }; 













}));